<template>
  <!-- 危险品联系人联系方式 -->
  <el-dialog
    :title="'车辆选择'"
    :visible.sync="dialogVisible"
    :before-close="closedialog"
    width="800"
    append-to-body
    :close-on-click-modal="false"
  >
  <div>
     <div class="table-item">
       <el-form :model="vehicleParams" ref="queryVehicleForm" :inline="true" label-width="68px" size="mini">
         <div class="sub-conditions">
           <div>
             <el-form-item label="中国车牌" prop="vehicleNo">
               <el-input v-model.trim="vehicleParams.vehicleNo" placeholder="请输入中国车牌" clearable
                         @keyup.enter.native="handleQueryVehicle"/>
             </el-form-item>
             <el-form-item label="外国车牌" prop="veCustomsNo">
               <el-input v-model.trim="vehicleParams.veCustomsNo" placeholder="请输入外国车牌" clearable
                         @keyup.enter.native="handleQueryVehicle"/>
             </el-form-item>
             <el-button class="filter-item" type="warning" icon="el-icon-search" @click="handleQueryVehicle"
                        size="mini">查询
             </el-button>
             <el-button class="filter-item filter-item2" type="success" icon="el-icon-check" @click="qdVehicleFilter" size="small">
               确定
             </el-button>
           </div>
         </div>
       </el-form>
       <el-table id="vehicleTable" ref="vehicleTable" :data="vehicleTableData" size="mini" style="width: 100%"
                 @select="selectVehicle" @selection-change="handleSelectionChange2" >
         <el-table-column type="selection" width="45"></el-table-column>
         <el-table-column label="中国车牌号" align="center" prop="domesticVehicleNo"/>
         <el-table-column label="外国车牌号" align="center" prop="abroadVehicleNo"/>
         <el-table-column label="车辆重量" align="center" prop="selfWt"/>
         <el-table-column label="车辆海关编码" align="center" prop="veCustomsNo" min-width="120" show-overflow-tooltip/>
         <el-table-column label="IC卡号" align="center" prop="cardNo"/>
         <el-table-column label="电子车牌号" align="center" prop="rfid"/>
       </el-table>
       <pagination size="mini" v-show="vehicleTotal>0" :total="vehicleTotal" :page.sync="vehicleParams.pageNum"
                   :limit.sync="vehicleParams.pageSize" @pagination="handleQueryVehicle"/>
     </div>
    </div>
</el-dialog>
</template>

<script>
import {findVehicleList} from "@/api/billsdecl/preVehicleRecord";
export default {
  name: "vehicleSelect",
  dicts:['sys_vehicle_audit_status'],
  data() {
    return {
      vehicleTableData: [],
      vehicleParams:{
        pageNum: 1,
        pageSize: 10,
      },
      dialogVisible:false,
      vehicleTotal:0,
      selectRow:null,
      //选择车辆列表
      selectVehicleList:[],
    };
  },
  computed: {

  },
  watch: {
  },
  methods: {
    open(){
      this.dialogVisible=true;
      //this.handleQueryVehicle();
    },
      handleQueryVehicle() {
        findVehicleList(this.vehicleParams).then(response => {
          this.vehicleTableData = response.rows;
          this.vehicleTotal = response.total;
          this.loading = false;
        });
      },
      selectVehicle(select,row){
        console.log(select);
        console.log(row);
      },
      qdVehicleFilter() {
        if (this.selectVehicleList.length==0) {
          this.$modal.msgError('请勾选车辆！');
          return;
        } else {
           this.$emit("returnValue", [...this.selectVehicleList]);
           this.closedialog();
           this.selectVehicleList=[];
           this.$refs.vehicleTable.clearSelection();
        }
      },
      handleSelectionChange2(selection) {
        if(selection.length>0){
          this.selectVehicleList=selection;
        }else{
          this.selectVehicleList=[];
        }
      },
      closedialog(){
        this.dialogVisible=false;
      }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-empty {
  padding: 0;
  .el-empty__image {
    width: 80px !important;
  }
  .el-empty__description {
    margin-top: 0px;
  }
}
.addBtn {
  margin-bottom: 10px;
}
.pagination {
  margin-top: 10px;
  text-align: right;
  padding: 6px 5px;
}
</style>
